<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				height:500px;
				border:4px solid red;
			}
		</style>
		<script src='jquery-3.4.1.js'></script>
		<script src='jquery.easing.1.3.js'></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//创建一个新的h2标签
					//在jquery中创建标签只需要将标签最终的代码写成字符串形式即可
					//var newH='<h2 class="hd">我是新来的!</h2>';
					//将新创建的标签追加到box中
					//$("#box").append(newH);
					
					//元素的追加
					//$("#box").append($("#title"));
					//$("#title").appendTo($("#box"));
					
					//从头部追加
					//$("#box").prepend($("#title"));
					//$("#title").prependTo($("#box"));
					
					//插队
					//$("#box h2").eq(1).after($("#title"));
					//$("#title").insertAfter($("#box h2").eq(1));
					
					//$("#box h2").eq(1).before($("#title"));
					//$("#title").insertBefore($("#box h2").eq(1));
					
					//给每一个选中的标签加包裹
//		     		$("h2").wrap('<div class="hd"></div>');
//		     		setTimeout(function(){
//		     			//取消外面的包裹结构
//		     			$("h2").unwrap();
//		     		},2000)
					
					//$("h2").wrapAll('<div class="hd"></div>');
					//$("h2").wrapInner('<div class="hd"></div>');
					
					//替换
					//$("#box h2").eq(2).replaceWith($("#title"));
					//$("#title").replaceAll($("#box h2").eq(2));
					
					//复制
					var newobj=$("#title").clone();
					//将新复制的标签追加到box里
					$("#box").append(newobj);
		     		
				})
				
			})
		</script>
	</head>
	<body>
		<h1 id='title'>我是h1标签</h1>
		<input type="button" id='btn' value='我是按钮' />
		<div id='box'>
			<h2>后盾人 人人做后盾0</h2>
			<h2>后盾人 人人做后盾1</h2>
			<h2>后盾人 人人做后盾2</h2>
			<h2>后盾人 人人做后盾3</h2>
			<h2>后盾人 人人做后盾4</h2>
		</div>
	</body>
</html>
